import axios from 'axios'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Button, Input, Notify } from 'react-vant'
import { useAppDispatch } from '../../app/hooks'
import { loginSuccess } from '../../app/user'
const Index = () => {
	const dispatch = useAppDispatch()
	const navigate = useNavigate()
	const login = async (values: any) => {
		const resp = await axios.post('/api/login', values);
		const { code, data, message } = resp.data;
		if (code === 200) {
			dispatch(loginSuccess(data))
			Notify.show({ type: "success", message });
			navigate(-1)
		} else {
			Notify.show({ type: 'danger', message })
		}
	}
	return (
		<div>
			<Form
				onFinish={login}
				footer={
					<div style={{ margin: '16px 16px 0' }}>
						<Button round nativeType='submit' type='primary' block>
							提交
						</Button>
					</div>
				}
			>
				<Form.Item
					tooltip={{
						message:
							'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
					}}
					intro='确保这是唯一的用户名'
					rules={[{ required: true, message: '请填写用户名' }]}
					name='username'
					label='用户名'
				>
					<Input placeholder='请输入用户名' />
				</Form.Item>
				<Form.Item
					rules={[{ required: true, message: '请填写密码' }]}
					name='password'
					label='密码'
				>
					<Input placeholder='请输入密码' />
				</Form.Item>
			</Form>
		</div>
	)
}

export default Index